<template>
	<view class="matchmaker">
		<top-header :value="4"></top-header>
		<view class="banner"><image src="../../static/hn_1.jpg" mode=""></image></view>
		<view class="floor">
			<view class="title">
				专业红娘团队
				<text></text>
			</view>
			<view class="desc">一对一会员服务，提供恋爱、婚姻、个人提升等全方位情感咨询服务</view>
			<view class="list">
				<view class="item">
					<image :src="matchMakerList[0].photo" class="avatar" mode=""></image>
					<view class="name">{{matchMakerList[0].name}}</view>
					<view class="user_desc">{{matchMakerList[0].appellation}}</view>
					<view :id="matchMakerList[0].id" class="btn" @click="toDetail">+ 找她牵线</view>
				</view>
				<view class="item">
					<image :src="matchMakerList[1].photo" class="avatar" mode=""></image>
					<view class="name">{{matchMakerList[1].name}}</view>
					<view class="user_desc">{{matchMakerList[1].appellation}}</view>
					<view :id="matchMakerList[1].id" class="btn" @click="toDetail">+ 找她牵线</view>
				</view>
				<view class="item">
					<image :src="matchMakerList[2].photo" class="avatar" mode=""></image>
					<view class="name">{{matchMakerList[2].name}}</view>
					<view class="user_desc">{{matchMakerList[2].appellation}}</view>
					<view :id="matchMakerList[2].id" class="btn" @click="toDetail">+ 找她牵线</view>
				</view>
				<view class="item">
					<image :src="matchMakerList[3].photo" class="avatar" mode=""></image>
					<view class="name">{{matchMakerList[3].name}}</view>
					<view class="user_desc">{{matchMakerList[3].appellation}}</view>
					<view :id="matchMakerList[3].id" class="btn" @click="toDetail">+ 找她牵线</view>
				</view>
			</view>
			<view class="arrow_region"><view class="button">更多红娘</view></view>
		</view>
		<view class="floor2">
			<view class="title">
				成功牵线案例
				<text></text>
			</view>
			<view class="desc">定制高端猎婚 • 打造一流服务</view>
			<view class="content">
				<div class="nodatatips">
					<i class="ico"></i>
					暂时木有内容
				</div>
			</view>
		</view>
		<view class="floor3">
			<view class="title">
				线下优质会员
				<text></text>
			</view>
			<view class="desc">优质线下资源 • 高端约会场所</view>
			<view class="typeList">
				<view class="typeList_item typeList_item_active">推荐</view>
				<view class="typeList_item">男生</view>
				<view class="typeList_item">女生</view>
			</view>
			<view class="list">
				<view class="item">
					<image src="../../static/logo.png" class="avatar" mode=""></image>
					<view class="user_desc">31岁/176cm</view>
					<view class="work">前端开发</view>
				</view>
				<view class="item">
					<image src="../../static/logo.png" class="avatar" mode=""></image>
					<view class="user_desc">31岁/176cm</view>
					<view class="work">前端开发</view>
				</view>
				<view class="item">
					<image src="../../static/logo.png" class="avatar" mode=""></image>
					<view class="user_desc">31岁/176cm</view>
					<view class="work">前端开发</view>
				</view>
			</view>
			<view class="arrow_region"><view class="button">更多会员</view></view>
		</view>
		<view class="btn_region">
			<view class="item">
				<i class="ico"></i>
				<view class="text">幸福热线</view>
			</view>
			<view class="item">
				<i class="ico"></i>
				<view class="text">咨询客服</view>
			</view>
			<view class="myBtn">
				<view class="ico"> 我的红娘</view>
			</view>
		</view>
		<tabbar :value="1"></tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			matchMakerList:[]
		};
	},
	onLoad() {
		this.getMatchMaker()
	},
	methods:{
		toDetail(event){
			let id = event.currentTarget.id
			uni.navigateTo({
				url:"/pages/matchmakerDetail/matchmakerDetail?id="+id
			})
		},
		async getMatchMaker(){
			let data = await this.request({
				url:'/mate',
				method:'GET'
			})
			// console.log(data)
			this.matchMakerList = data.data
		}
	}
};
</script>

<style lang="scss" scoped>
.matchmaker {
	padding: 120rpx 0 124rpx;
	min-height: 100vh;
	background-color: #fff;
	.banner {
		image {
			width: 752rpx;
			height: 458rpx;
		}
	}
	.floor {
		.list {
			display: flex;
			flex-flow: wrap;
			.item {
				width: 320rpx;
				margin: 0 20rpx 40rpx 20rpx;
				display: flex;
				flex-flow: column;
				align-items: center;
				padding: 40rpx;
				box-sizing: border-box;
				box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
				border-radius: 20rpx;
				.avatar {
					width: 196rpx;
					height: 196rpx;
					border-radius: 50%;
				}
				.name {
					margin: 20rpx 0;
				}
				.user_desc {
					font-size: 24rpx;
				}
				.btn {
					width: 180rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #fff;
					text-align: center;
					border-radius: 40rpx;
					background-color: #ff589b;
					margin-top: 24rpx;
					display: flex;
					align-items: center;
					font-size: 28rpx;
					justify-content: center;
				}
			}
		}
	}
	.floor2 {
		.nodatatips {
			height: 338rpx;
			margin-bottom: 100rpx;
			display: flex;
			flex-flow: column;
			align-items: center;
			color: #ccc;
			justify-content: flex-end;
			.ico {
				font-size: 100rpx;
			}
		}
	}
	.floor3 {
		.typeList {
			display: flex;
			align-items: center;
			justify-content: center;
			.typeList_item {
				margin: 0 3%;
				display: inline-block;
				padding: 0 30rpx;
				color: #666;
				font-size: 32rpx;
				font-weight: normal;
				height: 64rpx;
				line-height: 64rpx;
				border-radius: 40rpx;
				border: #f2f2f2 2rpx solid;
				background-color: #f8f8f8;
			}
			.typeList_item_active {
				background-color: #FF589B!important;
				font-weight: bold;
				color: #fff!important;
			}
		}
		.list{
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			box-sizing: border-box;
			.item{
				box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
				border-radius: 0 0 10rpx 10rpx;
				.avatar{
					border-radius: 10rpx 10rpx 0 0;
					width: 214rpx;
					height: 254rpx;
				}
				.user_desc{
					margin: 10rpx 0;
					font-size: 26rpx;
					text-align: center;
				}
				.work{
					margin: 20rpx 0;
					font-size: 26rpx;
					text-align: center;
					width: 100%;
				}
			}
		}
	}
	.title {
		padding-top: 20rpx;
		font-size: 40rpx;
		font-weight: bold;
		padding: 20rpx 0;
		display: flex;
		flex-flow: column;
		align-items: center;
		text {
			background-color: #ff589b;
			height: 6rpx;
			width: 40rpx;
			border-radius: 8rpx;
			margin: 10rpx 0;
		}
	}
	.btn_region{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.item{
			display: flex;
			flex-flow: column;
			align-items: center;
			.ico{
				color: #FF589B;
				font-size: 40rpx;
			}
			.text{
				font-size: 24rpx;
			}
		}
		.myBtn{
			display: flex;
			align-items: center;
			color: #fff;
			width: 240rpx;
			height: 80rpx;
			line-height: 80rpx;
			justify-content: center;
			border-radius: 40rpx;
			background-color: #FF589B
		}
		
	}
	.desc {
		font-size: 24rpx;
		padding: 20rpx 74rpx 50rpx 74rpx;
		text-align: center;
		
	}
	.arrow_region {
		display: flex;
		justify-content: center;
		margin-top: 40rpx;
		.button {
			background-color: #fff;
			min-width: 260rpx;
			border: 2rpx solid #ff589b;
			color: #ff589b;
			border-radius: 40rpx;
			text-align: center;
			height: 64rpx;
			line-height: 64rpx;
		}
	}
}
</style>
